<template>
    <el-button-group class="ml-4" id="toolBtns" :style="{left:position.left+'px',top:position.top+'px'}">
        <el-button type="info"  @click="handleEdit"  :icon="Edit"></el-button>
        <el-button type="info" @click="handleDelete" :icon="Delete"></el-button>
    </el-button-group>        
</template>

<script setup lang="ts">
/* import {
  ArrowLeft,
  Edit,
  Share,
  Delete,
  ArrowRight,
} from '@element-plus/icons-vue' */
import {
  reactive,
  ref,
  toRefs,
  getCurrentInstance,
  watch,
  nextTick,
  onMounted,
  defineEmits,
} from 'vue';
import { editableFieldArr, transforJson } from './transfer';
import { ElMessage, ElMessageBox } from 'element-plus';
const emit = defineEmits(['handleEdit', 'handleDelete']);

const position = ref({left:0,top:0});
let currentboxId = ''
// 初始化
onMounted(() => {
hide()
});
const setPosition = (info,boxId) => {
  // console.log('position.value',position.value);
  document.querySelector('#toolBtns').style.display = 'block'
  position.value.left = info.x
  position.value.top = info.y
  currentboxId = boxId
  return true;
};
const hide = () => {
  document.querySelector('#toolBtns').style.display = 'none'
};
const handleEdit = () => {
  emit('handleEdit',currentboxId)
  hide()
}
const handleDelete = () => {
  emit('handleDelete',currentboxId)
  hide()

}
// 父组件可以调用的api
defineExpose({
  setPosition,
  hide,
});
</script>
<style lang="scss" scoped>
    #toolBtns {
        position: fixed;
    }
</style>